<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>v-t directive object value usage</title>
    <script src="../../../node_modules/vue/dist/vue.global.js"></script>
    <script src="../../../packages/vue-i18n/dist/vue-i18n.global.js"></script>
  </head>
  <body>
    <div id="app">
      <p class="p1" v-t="{ path: 'message.hi', args: { name: 'kazupon' } }"></p>
      <p class="p2" v-t="{ path: byePath, locale: 'en' }"></p>
    </div>
    <script>
      const { createApp } = Vue
      const { createI18n } = VueI18n

      const i18n = createI18n({
        locale: 'ja',
        messages: {
          en: {
            message: {
              hi: 'Hi, {name}!',
              bye: 'good bye!'
            }
          },
          ja: {
            message: {
              hi: 'こんにちは、 {name}！',
              bye: 'さようなら！'
            }
          }
        }
      })

      const app = createApp({
        data() {
          return { byePath: 'message.bye' }
        }
      })
      app.use(i18n)
      app.mount('#app')
    </script>
  </body>
</html>
